<script setup lang="ts">
import { ElCard, ElTooltip } from 'element-plus'
import { propTypes } from '@/utils/propTypes'
import { useDesign } from '@/hooks/web/useDesign'

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('content-wrap')

defineProps({
  title: propTypes.string.def(''),
  isHeader: propTypes.bool.def(true),
  message: propTypes.string.def('')
})
</script>

<template>
  <ElCard :class="[prefixCls]" shadow="never">
    <template v-if="isHeader" #header>
      <slot name="title">
        <div v-if="title" class="flex items-center" style="display: inline-block; width: 60%">
          <span class="text-16px font-700">{{ title }}</span>
          <ElTooltip v-if="message" effect="dark" placement="right">
            <template #content>
              <div class="max-w-200px">{{ message }}</div>
            </template>
            <Icon class="ml-5px" icon="bi:question-circle-fill" :size="14" />
          </ElTooltip>
        </div>
      </slot>
      <div style="display: inline-block; width: 40%; text-align: right">
        <slot name="extr"></slot>
      </div>
    </template>
    <div>
      <slot></slot>
    </div>
  </ElCard>
</template>
